import { useState, memo, useCallback } from "react";

const Children = memo(function ({ handler }) {
    console.log('子组件渲染')
    return (
        <>
            <button onClick={handler}> 子组件更新</button>
        </>
    )
})

export default function Parent() {
    const [count, setCount] = useState(0)

    function handlerClick() {
        setCount(count + 1)
    }

    const handlerChildClick = useCallback(function handlerChildClick() {
        console.log('子组件')
    }, [])

    return (
        <>
            <div> {count}   </div>
            <button onClick={handlerClick}>更新count</button>
            <Children handler={handlerChildClick} />
        </>
    );
}